angular.module('myApp', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
      })
      .when('/form', {
        templateUrl: 'views/form.html',
        controller: 'FormCtrl'
      })
      .when('/radio', {
        templateUrl: 'views/radio.html',
        controller: 'RadioCtrl'
      })
      .when('/input', {
        templateUrl: 'views/input.html',
        controller: 'InputCtrl'
      })
      .when('/select', {
        templateUrl: 'views/select.html',
        controller: 'SelectCtrl'
      })
      .when('/checkBoxGroup', {
        templateUrl: 'views/checkBoxGroup.html',
        controller: 'CheckBoxGroupCtrl'
      })
      .when('/switch', {
        templateUrl: 'views/switch.html',
        controller: 'SwitchCtrl'
      })
      .when('/timePicker', {
        templateUrl: 'views/timePicker.html',
        controller: 'TimePickerCtrl'
      })
      .when('/upload', {
        templateUrl: 'views/upload.html',
        controller: 'UploadCtrl'
      })
      .when('/datePicker', {
        templateUrl: 'views/datePicker.html',
        controller: 'DatePickerCtrl'
      })
      .when('/link', {
        templateUrl: 'views/link.html',
        controller: 'LinkCtrl'
      })
      .when('/breadcrumb', {
        templateUrl: 'views/breadcrumb.html',
        controller: 'BreadcrumbCtrl'
      })
      .when('/dropdown', {
        templateUrl: 'views/dropdown.html',
        controller: 'DropdownCtrl'
      })
      .when('/card', {
        templateUrl: 'views/card.html',
        controller: 'CardCtrl'
      })
      .when('/layout', {
        templateUrl: 'views/layout.html',
        controller: 'LayoutCtrl'
      })
      .when('/descriptions', {
        templateUrl: 'views/descriptions.html',
        controller: 'DescriptionsCtrl'
      })
      .when('/collapse', {
        templateUrl: 'views/collapse.html',
        controller: 'CollapseCtrl'
      })
      .when('/menu', {
        templateUrl: 'views/menu.html',
        controller: 'MenuCtrl'
      })
      .when('/tag', {
        templateUrl: 'views/tag.html'
      })
      .when('/tabs', {
        templateUrl: 'views/tabs.html',
        controller: 'TabsCtrl'
      })
      .when('/transfer', {
        templateUrl: 'views/transfer.html',
        controller: 'TransferCtrl'
      })
      .when('/pagination', {
        templateUrl: 'views/pagination.html',
        controller: 'PaginationCtrl'
      })
      .when('/cascader', {
        templateUrl: 'views/cascader.html',
        controller: 'CascaderCtrl'
      })
      .when('/progress', {
        templateUrl: 'views/progress.html',
        controller: 'ProgressCtrl'
      })
      .when('/badge', {
        templateUrl: 'views/badge.html',
        controller: 'BadgeCtrl'
      })
      .when('/carousel', {
        templateUrl: 'views/carousel.html',
        controller: 'CarouselCtrl'
      })
      .when('/popconfirm', {
        templateUrl: 'views/popconfirm.html',
        controller: 'PopconfirmCtrl'
      })
      .when('/dialog', {
        templateUrl: 'views/dialog.html',
        controller: 'DialogCtrl'
      })
      .when('/button', {
        templateUrl: 'views/button.html',
        controller: 'ButtonCtrl'
      })
      .when('/message', {
        templateUrl: 'views/message.html',
        controller: 'MessageCtrl'
      })
      .when('/table', {
        templateUrl: 'views/table.html',
        controller: 'TableCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]).directive('compile', ['$compile', function($compile) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        scope.$watch(attrs.compile, function(html) {
          element.html(html);
          $compile(element.contents())(scope); // 关键编译步骤
        });
      }
    };
  }]);
